<template>
  <div class="container">
    <head-top go-back="true">
      <span @click="submitAddress" class="complete" slot="complete">完成</span>
    </head-top>
    <div style="height: 1.75rem"></div>

    <div class="cell flexLeft" style="border-top: 1px dashed #e4e4e4;">
      <span>收货人:</span>
      <input v-model="info.ReceiverName" type="text" placeholder="收货人">
    </div>

    <div class="cell flexLeft">
      <span>手机号码:</span>
      <input maxlength="11" v-model="info.ReceiverPhone" type="text" placeholder="手机号码">
    </div>
    <div class="cell flexLeft" @click="showAddress">
      <span>省-市-区:</span>
      <input readonly v-model="info.PCA" type="text" placeholder="省市区">
    </div>
    <div class="cell flexLeft">
      <span>详细地址:</span>
      <textarea v-model="info.ReceiverAddress" placeholder="详细地址"></textarea>
    </div>
    <div class="cell flexBetween">
      <span>设置默认地址:</span>
      <mt-switch v-model="val"></mt-switch>
    </div>

    <button @click="deleteAddress" v-if="info.handleType=='edit'" class="btn-big btn-big-error">删除地址</button>

    <div class="bg" v-if="visible"></div>
    <address-select
      :editaddress="editAddress"
      @address-confirm="getConfirm"
      @address-cancel="getCancel"
      class="address-select"
      v-if="visible"
    ></address-select>
  </div>
</template>

<script>
import { getStore } from "../../../config/mUtils";
import headTop from "src/components/header/newHead";
import addressSelect from "src/components/common/address";
import { Toast, MessageBox, Switch } from "mint-ui";

export default {
  name: "addAddress",
  data() {
    return {
      userInfo: {},
      val: true,
      visible: false,
      editAddress: "",
      info: {
        ReceiverName: "",
        ReceiverPhone: "",
        ReceiverAddress: "",
        Province: "",
        City: "",
        Area: "",
        InuserId: "",
        F_Default: "0",
        ZipCode: "",
        PCA: ""
      }
    };
  },
  computed: {},
  components: {
    headTop,
    addressSelect
  },
  methods: {
    submitAddress() {
      if (this.val) {
        this.info.F_Default = 0;
        //默认
      } else {
        this.info.F_Default = 1;
      }
      if (!this.info.ReceiverName) {
        Toast({
          message: "收货人名称不能为空",
          iconClass: "iconfont icon-cuo",
          duration: 1000
        });
        return;
      } else if (!/^1\d{10}$/gi.test(this.info.ReceiverPhone)) {
         Toast({
          message: "手机号码不正确",
          iconClass: "iconfont icon-cuo",
          duration: 1000
        });
        return;
      }
      else if(!this.info.ReceiverAddress){
        Toast({
          message: "收货地址不能为空",
          iconClass: "iconfont icon-cuo",
          duration: 1000
        });
        return;
      }
      else {
        if (this.info.handleType) {
          //编辑
          this.$axios.post("update.mc.integraladdress", this.info).then(p => {
            if (p.data.status == "10001") {
              Toast({
                message: "编辑成功",
                iconClass: "iconfont icon-dui",
                duration: 1500
              });
              setTimeout(() => {
                this.$router.replace({
                  path: "/addressIndex"
                });
              }, 1500);
            }
          });
        } else {
          //新增
          this.$axios.post("add.mc.integraladdress", this.info).then(p => {
            if (p.data.status == "10001") {
              Toast({
                message: p.data.msg,
                iconClass: "iconfont icon-dui",
                duration: 1500
              });
              setTimeout(() => {
                this.$router.replace({
                  path: "/addressIndex"
                });
              }, 1500);
            }
          });
        }
      }
    },
    deleteAddress() {
      MessageBox.confirm("确定删除此地址?").then(res => {
        if (res == "confirm") {
          this.$axios
            .post("delete.mc.integraladdress", { Id: this.info.Id })
            .then(p => {
              if (p.data.status == "10001") {
                Toast({
                  message: "删除成功",
                  iconClass: "iconfont icon-dui",
                  duration: 1500
                });
                setTimeout(() => {
                  this.$router.replace({
                    path: "/addressIndex"
                  });
                }, 1500);
              }
            });
        }
      }).catch(() => {
        });
    },
    showAddress() {
      this.visible = !this.visible;
      this.editAddress = this.info.PCA;
      document.addEventListener("touchmove", function(event) {
        //监听滚动事件
        if (this.visible) {
          //判断是遮罩显示时执行，禁止滚屏
          event.stopPropagation();
          event.preventDefault(); //最关键的一句，禁止浏览器默认行为
        }
      });
    },
    getCancel(res) {
      this.visible = res;
    },
    getConfirm(res) {
      this.info.Province = res.province;
      this.info.City = res.city;
      this.info.Area = res.area;
      this.info.PCA = res.province + "-" + res.city + "-" + res.area;
      this.visible = res.visible;
    }
  },
  created() {
    this.info = this.$route.params;
    this.userInfo = getStore("userInfo");
    this.info.InuserId = this.userInfo.Id;
    if(!this.info.handleType){
      this.val=false;
    }else{
      if(this.info.F_Default==0){
         this.val=true;
      }else{
        this.val=false;
      }
    }
    if (this.$route.params.Province) {
      this.info.PCA =
        this.$route.params.Province +
        "-" +
        this.$route.params.City +
        "-" +
        this.$route.params.Area;
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}

.address-select {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 20000;
  background: white;
}

.btn-big {
  margin-top: 0.85rem;
}

.container {
  padding: 0 0 1.5rem 0;
  background: white;

  .cell {
    padding: 5px 0.43rem;
    border-bottom: 1px dashed #e4e4e4;

    span {
      color: #666666;
      padding-right: 0.43rem;
      font-size: 0.6rem;
    }

    input {
      flex: 1;
      outline: none;
      border: none;
      height: 1.54rem;
      font-size: 0.55rem;
    }

    textarea {
      flex: 1;
      height: 2.5rem;
      font-size: 0.55rem;
    }
  }
}
</style>
